<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="/static/退出键.png" mode="widthFix" class="back-img"></image>
			</view>
			<view class="title">小宠用品</view>
			<view class="placeholder"></view>
		</view>

		<!-- 搜索框 -->
		<view class="search-container">
			<u-search placeholder="搜索小宠用品商品" v-model="keyword" disabled @click="navigateToSearch" shape="round" :showAction="false"></u-search>
		</view>

		<!-- 分类筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" :class="{ active: activeFilter === 'comprehensive' }"
				@click="setFilter('comprehensive')">
				综合
			</view>
			<view class="filter-item" :class="{ active: activeFilter === 'sales' }" @click="setFilter('sales')">
				销量
			</view>
			<view class="filter-item" :class="{ active: activeFilter === 'price' }" @click="setFilter('price')">
				价格
				<text class="sort-icon" v-if="activeFilter === 'price'">
					<text v-if="priceSort === 'asc'">↑</text>
					<text v-else-if="priceSort === 'desc'">↓</text>
					<text v-else>↕</text>
				</text>
			</view>
			<view class="filter-item" :class="{ active: activeFilter === 'filter' }" @click="setFilter('filter')">
				筛选
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="(item, index) in productList" :key="index"
				@click="navigateToDetail(item.id)">
				<view class="product-left">
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="product-info">
					<view class="product-name">{{ item.name }}</view>
					<view class="product-tags">
						<text class="tag tag-main" v-if="item.tags && item.tags.includes('笼子')">笼子</text>
						<text class="tag tag-sub" v-if="item.tags && item.tags.includes('食品')">食品</text>
						<text class="tag tag-sub" v-if="item.tags && item.tags.includes('用品')">用品</text>
					</view>
					<view class="product-sale-info">
						<text class="sale-count">已售{{ item.sales }}件</text>
					</view>
					<view class="product-promotion">
						<view class="promotion-tag" v-if="item.freeShipping">满97包邮</view>
						<view class="promotion-tag" v-if="item.promotion">{{ item.promotion }}</view>
					</view>
					<view class="product-price-row">
						<view class="price-info">
							<text class="price-symbol">¥</text>
							<text class="product-price">{{ item.price }}</text>
							<text class="price-tag" v-if="item.priceTag">{{ item.priceTag }}</text>
							<text class="product-original-price" v-if="item.originalPrice">¥{{ item.originalPrice
								}}</text>
						</view>
						<view class="cart-btn">
							<image src="/static/cart/add-cart-btn.png" mode="widthFix" class="cart-icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeFilter: 'comprehensive',
			priceSort: '', // 可以是 'asc' 或 'desc' 或空字符串
			productList: [
				{
					id: 1,
					name: '仓鼠豪华别墅套装大号透明亚克力笼子',
					price: 89.9,
					originalPrice: 129.9,
					sales: 1876,
					image: '/static/小宠专区.png',
					promotion: '限时特惠',
					freeShipping: true,
					tags: ['笼子']
				},
				{
					id: 2,
					name: '兔子笼子特大号家用室内防抓咬豪华别墅',
					price: 159.8,
					originalPrice: 199.9,
					sales: 1453,
					image: '/static/小宠专区.png',
					promotion: '买就送垫材',
					freeShipping: true,
					tags: ['笼子']
				},
				{
					id: 3,
					name: '小宠饮水器挂式自动喂食器龙猫兔子水壶',
					price: 25.8,
					sales: 2376,
					image: '/static/小宠专区.png',
					freeShipping: true,
					tags: ['用品']
				},
				{
					id: 4,
					name: '荷兰猪龙猫仓鼠豚鼠兔子饲料主粮食粮',
					price: 29.9,
					sales: 1982,
					image: '/static/小宠专区.png',
					freeShipping: true,
					tags: ['食品']
				},
				{
					id: 5,
					name: '小宠窝垫材木屑仓鼠用品豚鼠兔子垫料',
					price: 19.9,
					originalPrice: 29.9,
					sales: 3254,
					image: '/static/小宠专区.png',
					promotion: '3件7折',
					freeShipping: true,
					tags: ['用品']
				}
			],
			keyword: '' // 搜索关键词
		}
	},
	onLoad(options) {
		this.loadProductData()
	},
	methods: {
		goBack() {
			uni.navigateBack({
				fail: function () {
					uni.switchTab({
						url: '/pages/category/index',
						fail: function () {
							uni.redirectTo({
								url: '/pages/category/index'
							});
						}
					});
				}
			});
		},
		navigateToSearch() {
			uni.navigateTo({
				url: '/pages/search/index',
				fail: function (err) {
					console.error('导航到搜索页面失败:', err);
					uni.showToast({
						title: '搜索功能即将上线',
						icon: 'none'
					});
				}
			});
		},
		setFilter(filter) {
			if (filter === 'price' && this.activeFilter === 'price') {
				// 如果已经是价格筛选，则切换排序方向
				if (this.priceSort === 'asc') {
					this.priceSort = 'desc'
				} else if (this.priceSort === 'desc') {
					this.priceSort = ''
				} else {
					this.priceSort = 'asc'
				}
			} else {
				this.activeFilter = filter
				if (filter !== 'price') {
					this.priceSort = ''
				} else if (this.priceSort === '') {
					this.priceSort = 'asc'
				}
			}
			// 根据筛选条件重新加载数据
			this.loadProductData()
		},
		navigateToDetail(id) {
			uni.navigateTo({
				url: '/pages/shop/product-detail?id=' + id,
				fail: function (err) {
					console.error('导航到商品详情失败:', err);
					uni.showToast({
						title: '商品详情加载失败',
						icon: 'none'
					});
				}
			});
		},
		loadProductData() {
			let params = {
				categoryId: 7, // 小宠用品分类ID
				page: 1,
				size: 20
			};

			if (this.activeFilter === 'sales') {
				params.sortBy = 'sales';
				params.order = 'desc';
			} else if (this.activeFilter === 'price') {
				params.sortBy = 'price';
				params.order = this.priceSort || 'asc';
			}

			this.$api.productApi.getList(params)
				.then(res => {
					if (res && res.data) {
						this.productList = res.data;
					}
				})
				.catch(err => {
					console.error("获取小宠用品失败", err);
					uni.showToast({
						title: '商品加载失败',
						icon: 'none'
					});
				});
		}
	}
}
</script>

<style>
.container {
	padding-bottom: 20rpx;
	background-color: #F8F8F8;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	padding: 0 30rpx;
	background-color: #FFFFFF;
	position: relative;
}

.back-btn {
	width: 50rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-img {
	width: 40rpx;
	height: 40rpx;
}

.title {
	flex: 1;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.placeholder {
	width: 60rpx;
}

.search-container {
	padding: 6rpx 20rpx 0 20rpx;
	background-color: #FFFFFF;
	
	/deep/ .u-search {
		padding: 10rpx 0;
		
		&__content {
			background-color: #F5F5F5;
		}
	}
}

.filter-bar {
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding: 0 20rpx;
	height: 80rpx;
	border-bottom: 1rpx solid #EEEEEE;
}

.filter-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #333333;
	position: relative;
	height: 80rpx;
	line-height: 80rpx;
}

.filter-item.active {
	color: #FF0000;
	font-weight: bold;
}

.sort-icon {
	margin-left: 4rpx;
	color: #999;
}

.product-list {
	padding: 15rpx 20rpx;
}

.product-item {
	display: flex;
	padding: 20rpx;
	background-color: #FFFFFF;
	margin-bottom: 15rpx;
	border-radius: 8rpx;
}

.product-left {
	margin-right: 20rpx;
}

.product-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	color: #333333;
	line-height: 1.4;
	margin-bottom: 10rpx;
}

.product-tags {
	display: flex;
	margin-bottom: 10rpx;
}

.tag {
	padding: 4rpx 10rpx;
	border-radius: 4rpx;
	font-size: 20rpx;
	margin-right: 10rpx;
}

.tag-main {
	background-color: #F5F5F5;
	color: #333;
}

.tag-sub {
	background-color: #F5F5F5;
	color: #666;
}

.product-sale-info {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.product-promotion {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10rpx;
}

.promotion-tag {
	background-color: #FFF1F1;
	color: #FF6600;
	font-size: 22rpx;
	padding: 2rpx 8rpx;
	margin-right: 10rpx;
	border-radius: 4rpx;
}

.product-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.price-info {
	display: flex;
	align-items: baseline;
}

.price-symbol {
	color: #FF0000;
	font-size: 24rpx;
}

.product-price {
	color: #FF0000;
	font-size: 36rpx;
	font-weight: bold;
	margin-right: 8rpx;
}

.price-tag {
	background-color: #FFF1F1;
	color: #FF6600;
	font-size: 20rpx;
	padding: 2rpx 6rpx;
	border-radius: 4rpx;
	margin-right: 8rpx;
}

.product-original-price {
	color: #999999;
	font-size: 24rpx;
	text-decoration: line-through;
}

.cart-btn {
	width: 60rpx;
	height: 60rpx;
}

.cart-icon {
	width: 100%;
	height: 100%;
}
</style>